<template>
	<view>
		<image src="../../../static/header/bg.png" class="bg" mode=""></image>
		<u-sticky>
			<view class="top" :style="{
					paddingRight: headerPaddingRight + 'px',
					paddingTop: statusBarHeight + 'px',
					height: (navigationBarHeight + statusBarHeight) * 2 + 'rpx'
				}"
			>
				<view class="address-wrapper">
					<view class="icon_address"></view>
					<text class="address_text">{{ addressInfo.address || '获取位置失败' }}</text>
				</view>
			</view>
		</u-sticky>
		<view class="user_wrapper">
			<view class="user_info">
				<view class="imgName">
					<image class="user_img" v-if="!isLoginStatus" src="../../../static/user_logo.png" mode=""></image>
					<image class="user_img" v-else :src="userInfo.avatar" mode=""></image>
					<view class="noLogin" v-if="!isLoginStatus">
						<text>未登录</text>
						<button class="loginBtn" type="default" @click="showLogin = true">登录/注册</button>
					</view>
					<view class="login" v-else>
						<view>{{ userInfo.nickname }}</view>
						<view class="login-info">
							<view class="login-level">
								<i class="icon icon_level"></i>
								LV{{ userInfo.userLevel || 0 }}
							</view>
							<view class="login-coin">
								<i class="icon icon_coin"></i>
								{{ userInfo.availableGoldCoinCount || 0 }}枚金币
							</view>
						</view>
					</view>
				</view>
				<view class="clockIn" v-if="signDesc">
					<view class="clockText">
						<i class="icon" 
							:class="[currentPeriod == 17 ? 'icon_morning' : null,
							currentPeriod == 18 ? 'icon_after' : null,
							currentPeriod == 19 ? 'icon_nigth' : null]"></i>
							{{ signDesc }}
					</view>
					<button class="clockBtn" :class="[isCanSign == 0 ? 'disabled' : null]" type="default" @click="onClockIn">
						{{ isCanSign != 0 ? '打卡' : '已打卡' }}
					</button>
				</view>
			</view>
		</view>
		<u-modal
		    class="delete-container"
		    v-model="showLogin"
			title="登录提示"
		    content="请确认是否授权登录账号？"
		    confirm-text="立即登录"
			confirm-color="#FED034"
		    cancel-text="暂不登录"
		    :show-cancel-button="true"
		    @confirm="login"
		    @cancel="showLogin = false"
		></u-modal>
		<u-popup v-model="clockStatus" width="640rpx" mode="center" border-radius="32" closeable close-icon-size="40">
			<view class="space">
				<view class="space_img">
					<image src="../../../static/header/icon_clock.png" mode=""></image>
				</view>
				<view class="space_head">
					已打卡成功{{ clockNum }}次！
				</view>
				<view class="space_tips">
					每天可打卡3次，每邀请成功1位好友，奖励6枚金币！
				</view>
				<view class="replay-btn">
					<button type="default" class="recharge_coin" @click="onGoShare">邀请好友得金币</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UserLogin from '@/common/js/login'
	import { mapState } from 'vuex'
	import storage from '@/common/js/storage';
	export default {
		name:"home-head",
		mixins: [UserLogin],
		data() {
			return {
				showLogin: false,
				isCanSign: true, // 1  已打卡  0 未打卡 -1 不能打卡
				signDesc: null,
				clockStatus: false,
				clockNum: 0, // 已打卡次数
				currentPeriod: 17
			};
		},
		computed: {
			...mapState(['userInfo', 'isLoginStatus']),
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			customWidth(){
				return this.systemInfo.custom.width;
			},
			customHeight(){
				return this.systemInfo.custom.height;
			},
			//小程序右侧需要留出气泡空间
			headerPaddingRight(){
				// #ifndef MP
				return 0;
				// #endif
				// #ifdef MP
				return this.customWidth + 20;
				// #endif
			},
		},
		async mounted() {
			this.initCurrentUser()
			this.getClockMsg()
		},
		methods: {
			initCurrentUser() {
			    let currentUser = storage.get('userInfo');
				if(currentUser) {
					this.$store.commit('setUserInfo', currentUser)
				}
			},
			login() {
			    this.getUserInfo(() => {
			        this.$u.toast('登录成功');
			    })
			},
			getClockMsg() {
				this.$u.get('/paopao/mini/user/queryMySignMes').then(res => {
					if(res.status == -1) { return }
					if(res.isCanSign == null) {
						this.isCanSign = -1
					} else if(res.isCanSign) {
						this.isCanSign = 1
					} else {
						this.isCanSign = 0
					}
					// this.isCanSign = res.isCanSign
					this.signDesc = res.signDesc
					this.currentPeriod = res.currentPeriod
				})
			},
			onClockIn() {
				// 是否可以打卡
				if(!this.isCanSign) {
					return
				}
				// 打开
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				this.$u.post('/paopao/mini/user/signIn').then(res => {
					if(res.status == -1) { return }
					console.log(res)
					this.clockNum = res.count
					this.clockStatus = true
					this.getClockMsg()
				})
			},
			onGoShare() {
				uni.share({
					provider: "weixin",  
					scene: 'WXSceneSession',    // WXSceneSession/WXSenceTimeline/WXSceneFavorite  
					imageUrl: 'https://www.hesongzhineng.com/img/javafile/20210821103944-dc3a824a-bb88-4781-834d-83d7911129c3.png',  
					type: 5,
					title: '好友邀请你来一起玩',
					// summary: spaceDetail.spaceBriefIntroduction,
					miniProgram: {
						id: 'wx2959a675e140ffec',
						path: '/pages/tabbar/home?businessParamType=51&userId' + this.userInfo.id,
						type: '1'
					},
					success: (res) => {  
						console.log("weixin == success:" + JSON.stringify(res));  
					},  
					fail: (err) => {  
						console.log("weixin == fail:" + JSON.stringify(err));  
					}  
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import url("../../../common/css/var.less");
.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 90;
	left: 0;
}
.icon {
	width: 32rpx;
	height: 32rpx;
	display: inline-block;
	margin-right: 8rpx;
}
.icon_level {
	background: url(../../../static/header/icon_level.png) no-repeat center;
	background-size: contain;
}
.icon_coin {
	background: url(../../../static/header/icon_coin.png) no-repeat center;
	background-size: contain;
}
.icon_after {
	background: url(../../../static/header/icon_after.png) no-repeat center;
	background-size: contain;
}
.icon_morning {
	background: url(../../../static/header/icon_morning.png) no-repeat center;
	background-size: contain;
}
.icon_nigth {
	background: url(../../../static/header/icon_nigth.png) no-repeat center;
	background-size: contain;
}
.top{
	// position: fixed;
	// top: 0;
	// left: 0;
	z-index: 99;
	width: 100%;
	overflow: hidden;
	background: url(../../../static/header/head_bg.png) no-repeat center @mColor;
	background-size: contain;
	.address-wrapper{
		display:flex;
		flex-direction: column;
		flex-direction: row;
		align-items: center;
		position: relative;
		z-index: 99;
		padding: 30rpx 32rpx;
	}
	.icon_address {
		width: 32rpx;
		height: 34rpx;
		display: inline-block;
		background: url(../../../static/header/icon_map.png) no-repeat center;
		background-size: contain;
	}
	.address_text {
		color: @mText;
		font-size: 32rpx;
		padding-left: 10rpx;
		margin-top: -2rpx;
		max-width: 408rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
.user_wrapper {
	position: relative;
	width: 100%;
	height: 272rpx;
	background: url(../../../static/header/user_bg.png) no-repeat center;
	background-size: contain;
	// margin-top: calc(var(--status-bar-height) + 20rpx + 32rpx);
	margin-bottom: 80rpx;
	.user_info {
		position: absolute;
		z-index: 98;
		top: 48rpx;
		background-color: #FFFFFF;
		left: 32rpx;
		right: 32rpx;
		height: 304rpx;
		border-radius: 32rpx;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.imgName {
		display: flex;
		align-items: center;
	}
	.noLogin {
		display: flex;
		align-items: center;
		flex-direction: row;
		text {
			font-size: 32rpx;
			color: @mText;
			padding-left: 32rpx;
		}
		.loginBtn {
			margin-left: 16rpx;
			width: 160rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
			background-color: @bgColor !important;
			color: @tText;
			font-size: 28rpx;
		}
	}
	.login {
		// display: flex;
		// align-items: center;
		// flex-direction: column;
		width: 480rpx;
		font-size: 32rpx;
		padding-left: 32rpx;
		color: @mText;
		.login-info {
			display: flex;
			font-size: 24rpx;
			padding-top: 8rpx;
		}
		.login-level, .login-coin {
			display: flex;
			align-items: center;
			padding: 6rpx 16rpx;
			border-radius: 24rpx;
		}
		.login-level {
			
			background-color: #F1EAFF;
			color: @blueColor;
			margin-right: 16rpx;
		}
		.login-coin {
			background: #FFFAD3;
			color: #FFB533;
		}
	}
	.user_img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}
	.clockIn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background-color: @orangeColor;
		border-radius: 16rpx;
		padding: 20rpx;
		.clockText {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #FEFEFE;
		}
		.clockBtn {
			width: 120rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 36rpx;
			background-color: @mColor !important;
			color: @orangeColor;
			font-size: 28rpx;
			&.disabled {
				color: #999999;
				background-color: #F7F7F7 !important;
			}
		}
	}
}
.space {
	padding: 48rpx;
	text-align: center;
}
.space_img {
	width: 320rpx;
	height: 320rpx;
	margin: 0 auto;
	image {
		width: 100%;
		height: 100%;
	}
}
.space_head {
	font-size: 40rpx;
	color: @mText;
	padding-top: 48rpx;
}
.space_tips {
	padding-top: 32rpx;
	font-size: 32rpx;
	color: @tText;
}
.replay-btn {
	padding-top: 80rpx;
	background-color: #FFFFFF;
	.recharge_coin {
		line-height: 96rpx;
		background: @mColor !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: @mText;
		font-size: 36rpx;
	}
}
</style>
